<template>
  <div class="subject">
    <!-- 顶部 -->
    <div class="top">
      <el-card>
        <el-form ref="form" :inline="true" :model="form">
          <el-form-item label="学科编号">
            <el-input v-model="form.rid" />
          </el-form-item>
          <el-form-item label="学科名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="创建者">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="启用" value="1">启用</el-option>
              <el-option label="禁用" value="0">禁用</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜素</el-button>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="addEvent">+新增资料</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 表格数据 -->
    <div class="bottom">
      <el-card>
        <el-table :data="list" style="width: 100%">
          <el-table-column label="序号" width="50">
            <template v-slot="{ $index }">
              <div>
                {{ (page.page - 1) * page.limit + $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="rid" label="学科编号" />
          <el-table-column prop="name" label="学科名称" />
          <el-table-column prop="short_name" label="学科简称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="create_time" label="创建日期" />
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            :formatter="formatter"
          >
            <template v-slot="{ row }">
              <span :class="{ red: row.status === 0 }">
                {{ row.status ? '启用' : '禁用' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <div>
                <el-button type="text" @click="edit(row)">编辑</el-button>
                <el-button type="text" @click="forbidden(row.id)">
                  {{ !row.status ? '启用' : '禁用' }}
                </el-button>
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页导航 -->
        <div class="page">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[1, 2, 100, 200, 300]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="sizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-card>
    </div>
    <Add ref="add" @getData="getData" />
  </div>
</template>

<script>
import Add from './components/add.vue'
import { subjectList, subjectStatus, subjectRemove } from '@/api/subject.js'
export default {
  components: {
    Add
  },
  data() {
    return {
      form: {
        name: '', //	否	string	学科名称
        page: '', //	否	string	页码 默认为1
        limit: '', //	否	string	页尺寸 默认为10
        rid: '', //	否	string	学科编号
        username: '', //	否	string	创建者用户名
        status: '' //	否	string	状态 0(禁用) 1(启用)
      },
      // 表格数据
      list: [],
      page: {
        // 总页
        total: 20,
        // 页容量改变
        limit: 2,
        // 页码改变
        page: 1
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 页容量改变
    sizeChange(size) {
      this.page.limit = size
      this.page.page = 1
      // 与页容量进行联系 重新获取数据
      this.getData()
    },
    // 页码改变
    pageChange(page) {
      this.page.page = page
      // 与页码进行联系 页码改变重新调取接口
      this.getData()
    },
    addEvent() {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    async getData() {
      // 把更改的页面和页容量传给前面的那个函数
      const res = await subjectList({
        ...this.form,
        page: this.page.page,
        limit: this.page.limit
      })
      // console.log('13213',res)
      this.list = res.data.data.items
      // console.log(this.list)
      this.page.total = res.data.data.pagination.total
      // console.log(res)
    },
    // 转化状态数据
    formatter(row) {
      // console.log(row);
      if (row.status === 0) {
        return '禁用'
      } else {
        return '启用'
      }
    },

    // 编辑 打开弹框 数据回显 编辑 调用接口提交 关闭弹框 提示 刷新列表
    async edit(row) {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 启动
    async forbidden(id) {
      await subjectStatus(id)
      this.getData()
    },
    // 删除
    async del(id) {
      this.$confirm('您确定要删除该学科吗?', '提示')
        .then(async() => {
          this.$message.success('删除成功')
          await subjectRemove(id)
          this.getData()
        })
        .catch(() => {})
    },
    // 清除输入框
    clear() {
      this.form = {}
      this.getData()
    },
    // 根据输入框搜索列表信息
    async search() {
      // 根据关键字发送请求
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.subject {
  padding: 20px 18px;
  font-size: 16px;

  .bottom {
    margin-top: 10px;
    .page {
      text-align: center;
      margin-top: 30px;
    }
  }
  .red {
    color: red;
  }
}
</style>
